<template>
  <div>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <div id='container'>
      <div class="map-mask"></div>
    </div>
  </div>
</template>
<script>
import mapJson from './map.json'
import mapJson2 from './response_1611035255113.json'
export default {
  data () {
    return {
      mapJson,
      mapJson2,
      // 默认配置[120.75, 30.55]
      defaultStyle: {
        resizeEnable: true,
        mapStyle: 'amap://styles/graffiti',
        rotateEnable: true,
        pitchEnable: true,
        zoom: 9.5,
        center: [120.8, 30.55],
        pitch: 20,
        skyColor: '#030916',
        showLabel: false,
        viewMode: '3D', // 开启3D视图,默认为关闭
        buildingAnimation: true, // 楼块出现是否带动画
        expandZoomRange: true,
        zooms: [4, 13]
      },
      backDrop: 'amap://styles/whitesmoke',
      // AMap实例对象
      nMap: '',
      // 行政区覆盖物
      polygonList: [],
      key: 'a3905d3985de06d3cf69aa47435a96f8',
      adCode: 330000,
      depth: 2,
      layerList: [],
      markerData: [],
      infoWindow: '',
      addressMarkerList: [],
      color: ['rgba(255, 188, 26, 0.83)', 'rgba(106, 218, 1, 0.6)', 'rgba(252, 137, 0, 1)']
    }
  },
  computed: {},
  components: {

  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.loadScript()
    },
    /**
       * 加载脚本
       */
    loadScript () {
      const url = `https://webapi.amap.com/maps?v=2.0&key=${this.key}&callback=onLoad`
      const jsapi = document.createElement('script')
      jsapi.charset = 'utf-8'
      jsapi.src = url
      document.head.appendChild(jsapi)
      jsapi.onload = () => {
        this.initMap()
      }
    },
    /**
       * 实例化AMap对象
       */
    initMap () {
      window.onLoad = () => {
        this.defaultStyle.mapStyle = this.backDrop
        // eslint-disable-next-line no-undef
        this.nMap = new AMap.Map('container', this.defaultStyle)
        // 设置marker
        // if (this.markerData.length > 0) this.setMarker()
        // 设置区域层
        // if (this.layerList.length > 0) this.setDistrictLayer()
        // 设置覆盖物
        if (this.mapJson2 && this.mapJson2.resultObj.length > 0) this.polygonList = this.setPolygon()
      }
    },
    /**
       * 设置覆盖物
       */
    setPolygon (list = this.mapJson2.resultObj, flag = true) {
      if (flag) {
        this.setAddressMarker(list)
      }
      // 生成行政区划polygon
      const polygonList = list.map(item => {
        const {
          areaName
        } = item
        // eslint-disable-next-line no-undef
        const polygon = new AMap.Polygon({
          strokeWeight: 3,
          path: JSON.parse(item.mapCoordinate),
          fillOpacity: 1,
          fillColor: ['秀洲区', '经开区', '南湖区'].indexOf(areaName) > -1 ? this.color[0] : (['桐乡市', '海宁市'].indexOf(areaName) > -1 ? this.color[2] : this.color[1]),
          strokeColor: 'rgba(189, 189, 189, 1)'
        })
        // 添加鼠标移入行政区高亮显示
        polygon.on('mouseover', () => {
          this.mousePolygon(polygon, false, areaName)
        })
        polygon.on('mouseout', () => {
          this.mousePolygon(polygon, true, areaName)
        })
        polygon.setMap(this.nMap)
        return polygon
      })
      return polygonList
    },
    /**
       * 行政区高亮显示
       * @param polygon
       * @param state
       * @param name
       */
    mousePolygon (polygon, state) {
      this.polygonList.forEach(item => {
        item.setOptions({
          strokeColor: state ? 'rgba(189, 189, 189, 1)' : (item === polygon) ? '#0091FF' : 'rgba(189, 189, 189, 1)',
          strokeWeight: state ? 3 : (item === polygon) ? 5 : 3
        })
      })
    },
    // 添加街道markers
    setAddressMarker (list) {
      console.log(list)
      const markerList = list.map(item => {
        const { mapMainCoordinate, areaName } = item
        // eslint-disable-next-line no-undef
        const marker = new AMap.Marker({
          content: this.createAddressMarkerContent(item),
          position: JSON.parse(mapMainCoordinate),
          extData: {
            name: areaName
          },
          // eslint-disable-next-line no-undef
          offset: new AMap.Pixel(-50, -150)
        })
        this.addressMarkerList.push(marker)
        return marker
      })
      this.nMap.add(markerList)
      return markerList
    },
    createAddressMarkerContent (item) {
      const color = ['秀洲区', '经开区', '南湖区'].indexOf(item.areaName) > -1 ? this.color[0] : (['桐乡市', '海宁市'].indexOf(item.areaName) > -1 ? this.color[2] : this.color[1])
      const colors = ['秀洲区', '经开区', '南湖区'].indexOf(item.areaName) > -1 ? this.color[0] : (['桐乡市', '海宁市'].indexOf(item.areaName) > -1 ? this.color[2] : this.color[1])
      const content = `<div class="marker-container">\
        <div class="marker-label" style="background-color: ${colors}" data-text="${item.areaName}">\
          <span class="marker-label-bg"></span>\
          <i class="corner corner-1" style="border-color: ${color}"></i><i class="corner corner-2" style="border-color: ${color}"></i><i  style="border-color: ${color}" class="corner corner-3"></i><i class="corner corner-4"  style="border-color: ${color}"></i>\
        </div>\
        <div class="marker-line"><div class="marker-line-inside" style="background: linear-gradient(to bottom, transparent 0%, ${color} 100%)"></div></div>\
        <div class="marker-circle" style="border: 2px solid  #fff"><div class="marker-circle-inside" style="background-color: #fff"></div></div>\
      </div>`
      return content
    },
    /**
       * 设置区域层
       */
    setDistrictLayer () {
      // eslint-disable-next-line no-undef
      AMap.plugin('AMap.DistrictLayer', () => { // 异步加载插件
        // eslint-disable-next-line no-undef
        const disProvince = new AMap.DistrictLayer.Province({
          zIndex: 999,
          adcode: [this.adCode],
          depth: this.depth,
          styles: {
            fill: (properties) => {
              const obj = this.layerList.filter(item => properties.adcode === item.code)
              if (obj.length === 0) return
              return obj.shift().color
            },
            'province-stroke': 'cornflowerblue',
            'city-stroke': 'blue', // 中国地级市边界
            'county-stroke': 'blue' // 中国区县边界
          }
        })
        disProvince.setMap(this.nMap)
      })
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
  $mapColor: rgba(26, 223, 242, 1);
  $mapColors: #22d900;
  $mapBgColor: #0f6000;
  #container {
    width: 100%;
    height: 500px;
    overflow: hidden;
  }
  /deep/ .marker-container {
    .marker-label {
      position: relative;
      padding: 8px 0;
      width: 90px;
      text-align: center;
      color: #fff;

      .marker-label-bg {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        opacity: 0.4;
        background-color: $mapBgColor;
        border: 1px solid rgba(255, 255, 255, 0.2);
      }

      .corner {
        position: absolute;
        width: 10px;
        height: 10px;
        border-style: solid;
        border-color: $mapColors;
      }

      .corner-1 {
        left: 0;
        top: 0;
        border-left-width: 2px;
        border-top-width: 2px;
        border-bottom: none;
        border-right: none;
      }

      .corner-2 {
        right: 0;
        top: 0;
        border-right-width: 2px;
        border-top-width: 2px;
        border-bottom: none;
        border-left: none;
      }

      .corner-3 {
        left: 0;
        bottom: 0;
        border-bottom-width: 2px;
        border-left-width: 2px;
        border-top: none;
        border-right: none;
      }

      .corner-4 {
        right: 0;
        bottom: 0;
        border-bottom-width: 2px;
        border-right-width: 2px;
        border-top: none;
        border-left: none;
      }

      &:after {
        position: relative;
        content: attr(data-text);
        font-weight: bold;
      }
    }

    .marker-line {
      margin: auto;
      width: 2px;
      height: 120px;
      transform: translateY(10px);

      .marker-line-inside {
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, transparent 0%, $mapColor 100%) repeat-y;
        animation-name: hideLine;
        animation-duration: 1s;
        animation-iteration-count: infinite;
      }
    }

    .marker-circle {
      display: flex;
      margin: auto;
      width: 40px;
      height: 40px;
      border: 2px solid $mapColor;
      border-radius: 50%;
      transform: rotateX(50deg) translateZ(14px);
      opacity: 0.6;
      align-items: center;
      justify-content: center;
      animation: hideCircle 2s infinite ease-out;

      .marker-circle-inside {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: $mapColor;
      }
    }
  }
  /deep/ .amap-marker:nth-child(2n) .marker-circle {
    animation-delay: 0.3s;
  }

  @for $i from 1 through 9 {
    /deep/ .amap-marker:nth-child(#{$i}) .marker-line .marker-line-inside {
      animation-duration: 1.6s;
      animation-delay: 1.6s * $i;
    }
  }

  @keyframes hideLine {
    0% {
      height: 0px;
    }

    100% {
      height: 120px;
    }
  }

  @keyframes hideCircle {
    80% {
      opacity: 0;
    }

    100% {
      opacity: 0.6;
    }
  }
</style>
